<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <button @contextmenu.prevent="contextMenu" >右键触发按钮</button>
            <br>
            <hr>
            <br>
            <div @click.capture="outerClick">外层
                <div @click="middleClick">中层
                    <div @click.stop="innerClick">内层</div>
                </div>
            </div>
            <hr>
            <input type="text" @keyup.enter="publish"></input>
        </div>
        <script>
            Vue.config.productionTip = false;

            const vm = new Vue({
                el: "#app",
                data() {
                    return {};
                },
                methods: {
                    contextMenu() {
                        console.log('右键触发');
                    },
                    outerClick() {
                        console.log('最外层触发')
                    },
                    middleClick() {
                        console.log('中间层触发')
                    },
                    innerClick() {
                        console.log('最内层触发')
                    },
                    publish() {
                        console.log('敲了回车')
                    }
                }
            });
        </script>
    </body>
</html>
